<template>
  <view class="tp-art-item-list">
    <view class="tp-art-item-w" v-for="(item, idx) in plans" :key="item.planId">
      <tp-art-item v-bind="item" :index="idx" @select="handleSelect" @agree="handleAgree" @collect="handleCollect"></tp-art-item>
    </view>
    <view v-if="more" class="tp-art-item-more" @click="handleLoadMore"><text>{{ _moreText }}</text></view>
  </view>
</template>

<script>
  /**
   * 规划列表
   * @description 规划列表
   * @property {Array} plans 规划列表
   * @property {Boolean} more 是否显示加载更多
   * @property {String} moreText 加载更多自定义文本
   */
  export default {
    name: "tp-art-item-list",
    emits: ["agree", "collect", "loadMore"],
    props: {
      plans: {
        type: Array,
        default: []
      },
      more: Boolean,
      moreText: String
    },
    data() {
      return {

      };
    },
    computed: {
      _moreText() {
        return this.moreText ? this.moreText : "加载更多"
      }
    },
    methods: {
      handleSelect(planId) {
        uni.navigateTo({
          url: "/pages/plan/detail?planId=" + planId
        })
      },
      handleAgree(e) {
        this.$emit("agree", e)
      },
      handleCollect(e) {
        this.$emit("collect", e)
      },
      handleLoadMore() {
        this.$emit("loadMore")
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .tp-art-item-list {
    color: var(--gray-2);
    overflow: hidden;
    //border-radius: $card-border-radius;
    //background: $card-bg;
    //box-shadow: var(--shadow-1);
    //padding: $card-padding;
    margin: 0 $card-padding;

    .tp-art-item-w {
      padding: $card-padding 0;
      //border-bottom: 1px dashed var(--gray-6);
      &:first-child {
        padding-top: 0;
      }
    }
    .tp-art-item-more {
      display: flex;
      justify-content: center;
      padding-top: $gutter;
      font-size: $font-size-md;
    }

  }
</style>